Título del blog con efecto gradient

En la entrada anterior añadíamos con CSS efecto gradient a un texto, karla preguntaba si era posible añadir ese mismo efecto al título del blog y la respuesta es si.

Para conseguirlo nos situamos en plantilla edición de HTML y marcamos para expandir la plantilla, buscamos lo siguiente:

<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>

La etiqueta <data:title/> es la que genera el título del blog, las sustituimos por la siguientes líneas:

<div class='pattern'>
<h1><span/><data:title/></h1>
</div>

Quedaría así:

<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='pattern'>
<h1><span/><data:title/></h1>
</div>

<b:else/>
<a expr:href='data:blog.homepageUrl'>
<div class='pattern'>
<h1><span/><data:title/></h1>
</div></a>
</b:if>
</b:includable>

Guardamos los cambios y justo antes de ]]></b:skin> añadimos los estilos para el nuevo título:

.pattern {
background:none repeat scroll 0 0 #000000;
margin:30px 0 50px;
padding:30px 0 30px 30px;
}
.pattern h1 {
color:#FFFFFF;
font:bold 600%/100% "Lucida Grande",Arial,sans-serif;
letter-spacing:-6px;
margin:0;
position:relative;
text-transform:uppercase;
}
.pattern h1 span {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjysX0u5kJwgZ3-WDaKKQDAhrYeqRp8mYdH5JvkYWWdR9zhqeJparK9ou2AHQdXEgLSnqAztk3n5zUxrdERtik324s0EZRaCe1AzQaxG5o3fSAS5cP1evW3zenvklvOIRez1I4l/s0/pattern-zebra.png") repeat scroll 0 0 transparent;
display:block;
height:100px;
position:absolute;
width:100%;
}

Si en vista previa comprobamos que la imagen del gradient se visualiza fuera del bloque modificaremos la anchura en width de forma que el ancho sea menor que el que tenemos en header-wrapper.

.pattern h1 span {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjysX0u5kJwgZ3-WDaKKQDAhrYeqRp8mYdH5JvkYWWdR9zhqeJparK9ou2AHQdXEgLSnqAztk3n5zUxrdERtik324s0EZRaCe1AzQaxG5o3fSAS5cP1evW3zenvklvOIRez1I4l/s0/pattern-zebra.png") repeat scroll 0 0 transparent;
display:block;
height:100px;
position:absolute;
width:750px;
}

Cualquier modelo de gradient puede adaptarse al título del blog, bastará con añadir los estilos correspondientes y envolver la etiqueta <data:title/> con la misma clase.Ver ejemplo.